import { Input as AntInput, type InputProps as AntInputProps } from 'antd-mobile'
import { Search } from 'lucide-react'
import { cn } from '@/lib/utils'

interface InputProps extends AntInputProps {
  variant?: 'default' | 'search'
  rounded?: boolean
}

export function Input({ 
  variant = 'default', 
  rounded = true,
  className,
  placeholder = '请输入内容...',
  ...props 
}: InputProps) {
  const baseClasses = 'bg-white border-2 border-gray-100 focus:border-[#E6F3FF] focus:outline-none transition-all duration-300'
  
  const variantClasses = {
    default: 'text-gray-800 placeholder-gray-400',
    search: 'pl-12'
  }[variant]
  
  const roundedClass = rounded ? 'rounded-2xl' : 'rounded-lg'
  
  return (
    <div className="relative">
      {variant === 'search' && (
        <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
          <Search size={20} />
        </div>
      )}
      <AntInput
        className={cn(baseClasses, variantClasses, roundedClass, 'px-4 py-3', className)}
        placeholder={placeholder}
        {...props}
      />
    </div>
  )
}